<template>
	<div class="weekly-calendar">
		<h2>{{ showMonth }}{{ weekText }}</h2>
		<div class="days">
			<div class="day-labels">
				<div class="day-label">一</div>
				<div class="day-label">二</div>
				<div class="day-label">三</div>
				<div class="day-label">四</div>
				<div class="day-label">五</div>
				<div class="day-label">六</div>
				<div class="day-label">日</div>
			</div>
			<div class="day-cells">
				<div class="day-cell" v-for="(day, index) in days" :key="index"
				:class="{ today: (isToday(day) && !checkIndex) || checkIndex == index, 'not-in-month': !isInMonth(day), highlighted: index === highlightIndex}">
					<div class="day-number" @click="clickDays(index, day)">
						{{ isToday(day) ? '今天' : format(day, "dd") }}
						<div class="lunar-date">{{ getLunarDate(day) }}</div>
					</div>
          
				</div>
			</div>
		</div>
	</div>
</template>
<!-- 现在这个代码中，没有默认高亮了 -->
<script>
import { format } from "date-fns";
import calendar from 'js-calendar-converter'

export default {
	data() {
		return {
			currentWeek: {
				start: null,
				end: null
			},
			checkIndex: null, // 当前选中index
			showMonth: null, // 当前显示月份
			weekText: "",
			highlightIndex: null, // 用户点击的日期索引
		};
	},
	computed: {
		days() {
			const days = [];
			const weekStart = this.currentWeek.start;
			const weekEnd = this.currentWeek.end;
			const diff = (weekEnd.getTime() - weekStart.getTime()) / (24 * 60 * 60 * 1000);
			for (let i = 0; i <= diff; i++) {
				const day = new Date(weekStart.getTime() + i * 24 * 60 * 60 * 1000);
				days.push(day);
			}
			return days;
		}
	},
	methods: {
		format,
		clickDays(index, day) {
			this.checkIndex = index;
			this.highlightIndex = index;
			let dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			let month = day.getMonth() + 1;
			console.log(month, "month");
			let dayIndex = day.getDate();
			let selectedDate = new Date(day.getFullYear(), month - 1, dayIndex);
			let selectedDayOfWeek = dayOfWeek[selectedDate.getDay()];
			let lunarDate = calendar.solar2lunar(day.getFullYear(), day.getMonth() + 1, day.getDate());
			this.weekText = `${selectedDayOfWeek}${lunarDate.gzYear}年${lunarDate.IMonthCn}${lunarDate.IDayCn}`

			this.showMonth = format(day, "MM'月'dd'日'")
		},
		isToday(date) {
			const today = new Date();
			return date.toDateString() === today.toDateString();
		},
		isInMonth(date) {
			return format(date, "yyyy/MM") == this.showMonth
		},
		getLunarDate(date) {
			let lunarDate = calendar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
			return `${lunarDate.IMonthCn}${lunarDate.IDayCn}`
		},
		setToday() {
			const firstDayOfWeek = 1;
			const today = new Date();
			const currentWeekStart = new Date(
				today.getTime() - (today.getDay() - firstDayOfWeek) * 24 * 60 * 60 * 1000
			);
			this.currentWeek.start = currentWeekStart;
			this.currentWeek.end = new Date(
				currentWeekStart.getTime() + 6 * 24 * 60 * 60 * 1000
			);
			this.showMonth = format(this.currentWeek.start, "MM'月'dd'日'");

			// 默认高亮今天的日期
			const index = this.days.findIndex(day => this.isToday(day));
			if (index !== -1) {
				this.clickDays(index, this.days[index]);
			}
		}
	},
	created() {
		this.setToday()
	}
};
</script>


 
<style scoped>
.weekly-calendar {
	max-width: 500px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
}

.weekly-calendar h2 {
	text-align: center;
}

.weekly-calendar .controls {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.weekly-calendar .day-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.weekly-calendar .day-label {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.weekly-calendar .day-cells {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.weekly-calendar .day-cell {
	flex: 1;
	border: 1px solid #ccc;
	padding: 10px;
	text-align: center;
}

.weekly-calendar .highlighted {
	background-color: rgba(18, 122, 255, 1);
}

.weekly-calendar .not-in-month {
	color: #ccc;
}
</style>